<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>菜单</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
        <meta name="renderer" content="webkit"/>
        <meta name="force-rendering" content="webkit"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <link rel="stylesheet" href="/static/admin/static/component/pear/css/pear.css"/>
        <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    </head>
    <body>
        <form class="layui-form" lay-filter="addForm">
            <div class="mainBox">
                <div class="main-container">
                    <div class="layui-input-inline" style="display: none;">
                        <select lay-verify="" type="hidden"></select>
                    </div>
                    <input type="hidden" name="id" class="layui-input" value="#(menu.id)">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <span class="p-form-required">*</span>菜单名:
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" value="#(menu.name)" required lay-verify="required"
                                       placeholder="请输入菜单名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <span class="p-form-required">*</span>菜单链接:
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="url" value="#(menu.url)" required lay-verify="required"
                                       placeholder="请输入菜单链接" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <span class="p-form-required">*</span>图标:
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" id="icon" name="icon" value="#(menu.icon)" placeholder="请输入图标"
                                       autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <label class="layui-form-label">序号:</label>
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="seq" value="#(menu.seq)"
                                       oninput="value=value.replace(/[^\d]/g,'')"
                                       placeholder="请输入序号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <span class="p-form-required">*</span>打开方式:
                            </label>
                            <div class="layui-input-inline">
                                <select name="target" lay-verify="required">
                                    <option value="1" #(menu.target== 1 ?
                                    'selected': '')>新窗口</option>
                                    <option value="0" #(menu.target== 0 ?
                                    'selected': '')>本页</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <span class="p-form-required">*</span>状态:
                            </label>
                            <div class="layui-input-inline">
                                <select name="status" lay-verify="required">
                                    <option value="0" #(menu.status== 0 ?
                                    'selected': '')>正常</option>
                                    <option value="1" #(menu.status== 1 ?
                                    'selected': '')>禁用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <span class="p-form-required">*</span>菜单类型:
                            </label>
                            <div class="layui-input-inline">
                                <select name="type" lay-verify="required">
                                    <option value="0" #(menu.type== 0 ?
                                    'selected': '')>前端</option>
                                    <option value="1" #(menu.type== 1 ?
                                    'selected': '')>后端</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                <label class="layui-form-label">父节点:</label>
                            </label>
                            <div class="layui-input-block">
                                <ul id="pid" name="pid" class="dtree" data-id="0"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            角色:
                        </label>
                        <div class="layui-input-block">
                            <div id="demo1" class="xm-select-demo" name="roles"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="button-container">
                    <button type="button" lay-submit lay-filter="addForm" class="pear-btn pear-btn-primary pear-btn-sm">
                        <i class="fa fa-check" aria-hidden="true"></i>
                        确定
                    </button>
                    <button type="button" class="pear-btn pear-btn-sm p-cancel-btn">
                        <i class="fa fa-close" aria-hidden="true"></i>
                        取消
                    </button>
                </div>
            </div>
        </form>

        <script src="/static/public/libs/layui-v2.5.6/layui/layui.js"></script>
        <script src="/static/admin/static/component/pear/pear.js"></script>
        <script>
            let form, element, layer, $;
            layui.use(['layer', 'form', 'element', 'jquery', 'dtree', 'iconPicker', 'xmSelect'], function () {
                form = layui.form;
                element = layui.element;
                layer = layui.layer;
                $ = layui.jquery;
                var dtree = layui.dtree;
                var iconPicker = layui.iconPicker;
                var xmSelect = layui.xmSelect;
                // 表单验证
                form.verify({});
                // 表单提交
                form.on('submit(addForm)', function (data) {
                    data.field.pid = dtree.selectVal("pid").pid;
                    $.ajax({
                        type: "POST",
                        url: "/admin/menu/update",
                        contentType: "application/json",
                        data: JSON.stringify(data.field),
                        success: function (data) {
                            if (data.code === 200) {
                                parent.queryTable();
                                parent.parent.toast.success({message: '更新成功', position: 'topCenter'});
                                const index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                parent.parent.Win10.setDesktop({
                                    url: '/admin/menu/getAdminMenu',
                                    dom: '#win10-shortcuts'
                                });
                            } else {
                                parent.parent.toast.error({message: data.msg, position: 'topCenter'});
                            }
                        },
                        error: function (data) {
                            parent.parent.toast.error({message: "更新失败", position: 'topCenter'});
                        }
                    });
                    return false;
                });
                // 取消
                $(".p-cancel-btn").click(function () {
                    const index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                });
                dtree.renderSelect({
                    elem: "#pid",
                    width: "100%", // 指定树的宽度
                    url: "/admin/menu/list",
                    method: 'get',
                    dataStyle: 'layuiStyle',
                    selectInitVal: '#(menu.pid)',
                    response: {           // 树返回的json格式
                        statusName: "code",		  //返回标识
                        statusCode: 200,		  //返回码
                        message: "message",		  //返回信息
                        rootName: "data",		  //根节点名称
                        treeId: "id",			  //节点ID
                        parentId: "pid",	  //父节点ID
                        title: "name",			  //节点名称
                        childName: "childMenu",	  //子节点名称
                    }
                });
                iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#icon',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false，默认true
                    search: true,
                    // 是否开启分页：true/false，默认true
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12,
                    // 每个图标格子的宽度：'43px'或'20%'
                    cellWidth: '43px',
                    // 点击回调
                    click: function (data) {
                        console.log(data);
                    },
                    // 渲染成功后的回调
                    success: function (d) {
                        console.log(d);
                    }
                });
                var demo5 = xmSelect.render({
                    el: '#demo1',
                    name:'roles',
                    data: []
                });
                $.ajax({
                    type: "get",
                    url: "/admin/menu/getRoles?id=#(menu.id)",
                    success: function (data) {
                        if (data.code === 200) {
                            demo5.update({
                                data: data.data
                            });
                        } else {
                            parent.parent.toast.error({message: data.msg, position: 'topCenter'});
                        }
                    },
                    error: function (data) {
                        parent.parent.toast.error({message: "获取失败", position: 'topCenter'});
                    }
                });
            });
        </script>
    </body>
</html>
